// 引入常态化样式
require("../../assets/css/normalize.css");
//引入重置样式
require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/common.css");
// 引入阿里矢量图
require("../../assets/fonts/iconfont.css");
// 引入自己的样式
require("./sport_course_intro.less");
//引入公共js
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");
document.addEventListener("DOMContentLoaded", function () {
	// 1.点击回退按钮回到上一页
	dom.get("#backbtn").addEventListener("click", function () {
		location.href = "sport_course.html";
	});
	// 2.获取地址,渲染页面
	let id = location.search.split("=").pop();
	axios.get("/api/train/courseDetail?id=" + id).then((res) => {
		let data = res.data.data;
		let dataArr = data.fragments;
		// 将视频数据存储到localStorage中
		localStorage.setItem("fragments", JSON.stringify(dataArr));
		let videoUrl = data.fragments[0].videoUrl;
		// 视频地址
		dom.get("#video").src = axios.defaults.baseURL + videoUrl;
		// 视频的海报
		dom.get("#video").poster = axios.defaults.baseURL + data.imgurl;
		// 4.获取文字
		dom.get(".title h2").textContent = data.name;
		dom.get(".num1").textContent = data.calorie;
		dom.get(".num2").textContent = data.time;
		dom.get(".num3").textContent = data.peoplenum;
		dom.get("#desc").textContent = data.desc;
	});
	// 3.给视频预览按钮绑定播放事件
	dom.get("#continueBtn").addEventListener("click", function () {
		dom.get("#video").play();
		dom.get(".playbtn").style.display = "none";
	});
	// 4.视频暂停时出现继续播放按钮
	dom.get("#video").addEventListener("pause", function () {
		dom.get(".pausebtn").style.display = "block";
	});
	// 视频播放时隐藏继续播放按钮
	dom.get("#video").addEventListener("play", function () {
		dom.get(".pausebtn").style.display = "none";
	});
	// 点击继续播放按钮隐藏按钮
	dom.get(".pausebtn").addEventListener("click", function () {
		dom.get("#video").play();
		dom.get(".pausebtn").style.display = "none";
	});
});
